<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>用户编辑</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport"
              content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
        <link rel="shortcut icon" type="image/x-icon" th:href="@{/favicon.ico}"/>
        <link rel="stylesheet" th:href="@{/css/font.css}">
        <link rel="stylesheet" th:href="@{/css/xadmin.css}">
        <link rel="stylesheet" th:href="@{/lib/layui/extend/formSelects-v4.css}" />
        <script type="text/javascript" th:src="@{/lib/jquery/jquery.min.js}"></script>
        <script charset="utf-8" th:src="@{/lib/layui/layui.js}"></script>
        <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
        <script type="text/javascript" th:src="@{/js/js-pinyin.js}"></script>
        <style>
            .layui-form-checked:hover span {
                background-color: #02a7f0;
            }
        </style>
    </head>

    <body>
        <div class="x-body">
            <form action="" method="post" class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <label for="username" class="layui-form-label">
                        用户名
                    </label>
                    <div class="layui-input-block">
                        <input type="text" id="username" name="username" th:value="${user?.username}"
                               lay-verify="username" lay-vertype="tips"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="email" class="layui-form-label">
                        邮箱
                    </label>
                    <div class="layui-input-block">
                        <input type="text" id="email" name="email"  th:value="${user?.email}"
                               lay-verify="required|email" lay-vertype="tips"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!-- 编辑时不显示密码框 -->
                <div th:if="${user == null}" class="layui-form-item">
                    <label for="password" class="layui-form-label">
                        用户密码
                    </label>
                    <div class="layui-input-block">
                        <input type="password" id="password" name="password"
                               lay-verify="required" lay-vertype="tips"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" pane="">
                    <label class="layui-form-label">
                        状态
                    </label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="1" th:checked="${user?.status == '1' || user == null}" title="正常">
                        <input type="radio" name="status" value="0" th:checked="${user?.status == '0'}" title="锁定">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        角色
                    </label>
                    <div class="layui-input-block">
                        <select name="role" xm-select="role-select"
                                lay-verify="required"
                                lay-vertype="tips">
                            <option value="">请选择角色</option>
                            <option th:each="role:${roles}" th:value="${role.roleId}" th:text="${role.roleName}"
                                    th:selected="${#arrays.contains((roleIds == null ? #arrays.toIntegerArray(new Integer[]{}) : roleIds), role.roleId)}"></option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        部门
                    </label>
                    <div class="layui-input-block">
                        <div class="layui-unselect layui-form-select" id="deptNameDiv">
                            <div class="layui-select-title">
                                <input type="text" id="deptName"
                                       placeholder="请选择" class="layui-input layui-unselect" readonly>
                                <input type="hidden" name="deptId" id="deptId">
                                <i class="layui-edge"></i>
                            </div>
                        </div>
                        <div class="layui-card dtree-select" id="deptTreeDiv">
                            <div class="layui-card-body">
                                <div id="toolbarDiv">
                                    <ul id="deptTree" class="dtree" data-id="0" style="width: 100%;"></ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block" style="margin-left:0;text-align:center;">
                        <input type="hidden" name="userId" th:value="${user?.userId}">
                        <button type="button"  th:text="${user}?'修改':'增加'"  class="layui-btn layui-btn-normal btn-w100" lay-submit="" data-th-lay-filter="${user}?'edit':'add'"></button>
                    </div>
                </div>
            </form>
        </div>

        <script>
            layui.config({
                base: '/lib/layui/extend/'
            }).extend({
                formSelects: 'formSelects-v4'
            }).use(['form', 'layer', 'formSelects', 'dtree'], function () {
                $ = layui.jquery;
                var form = layui.form
                    , layer = layui.layer
                    , formSelects = layui.formSelects
                    , dtree = layui.dtree;

                var deptDTree = dtree.render({
                    elem: "#deptTree",
                    url: "/dept/tree",
                    dataStyle: "layuiStyle",
                    method: "GET",
                    dot: false,     // 圆点是否显示
                    accordion: true,
                    menubar: true,
                    response: {
                        statusCode: 0,
                        message: "msg",
                        treeId: "id",
                        parentId: "parentId",
                        title: "name"
                    },
                    done: function (response, obj) {
                        var deptId = [[${user?.deptId + ''}]] ;
                        var dept = deptDTree.getParam(deptId);
                        if (dept) {
                            $("#deptName").val(dept.context);
                            $("#deptId").val(dept.nodeId);
                        }
                    }
                });

                $("#deptName").on("click",function(){
                    $(this).toggleClass("layui-form-selected");
                    $("#deptTreeDiv").toggleClass("layui-show layui-anim layui-anim-upbit");
                });

                dtree.on("node(deptTree)", function(obj){
                    console.log(obj);
                    $("#deptName").val(obj.param.context);
                    $("#deptId").val(obj.param.nodeId);
                    $("#deptNameDiv").toggleClass("layui-form-selected");
                    $("#deptTreeDiv").toggleClass("layui-show layui-anim layui-anim-upbit");
                });

                form.on('submit(add)', function (form) {
                    form.field.role = formSelects.value('role-select', 'val');
                    $.post('/user', form.field, function (result) {
                        handlerResult(result, addDone);
                    });
                    return false;
                });

                //监听提交
                form.on('submit(edit)', function (form) {
                    form.field._method = 'PUT';
                    form.field.role = formSelects.value('role-select', 'val');
                    $.post('/user', form.field, function (result) {
                        handlerResult(result, editDone);
                    });
                    return false;
                });

                formSelects.filter('role-select', function (id, inputVal, val, isDisabled) {
                    return !(PY.fullPY(val.name).toLowerCase().indexOf(inputVal) !== -1 ||    // 拼音全拼是否包含
                        PY.fullPY(val.name, true).indexOf(inputVal) !== -1 ||                 // 拼音简拼是否包含
                        val.name.indexOf(inputVal) !== -1);
                });

                function addDone(data) {
                    layer.msg("添加成功", {icon: 6});
                }

                function editDone(data) {
                    layer.msg("修改成功", {icon: 6});
                }
            });
        </script>
    </body>

</html>